import { MaterialIcons } from "@expo/vector-icons";
import React, { useState } from "react";
import {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import ColorPicker from "react-native-wheel-color-picker";

interface MaskEditorProps {
  onMaskSelect: (mask: MaskStyle) => void;
  onMaskCustomize: (settings: MaskSettings) => void;
  currentTab?: "shape" | "gradient";
}

export interface MaskStyle {
  id?: string;
  name?: string;
  type: 'shape' | 'gradient' | 'text' | 'custom';
  shape?: 'circle' | 'rectangle' | 'heart' | 'star' | 'triangle' | 'diamond' | 'square' | 'hexagon' | 'oval' | 'cross' | 'arrow';
  gradientType?: 'linear' | 'radial' | 'angular';
  gradient?: string[];
  preview?: string;
  opacity?: number;
  feather?: number;
  invert?: boolean;
  blendMode?: 'normal' | 'multiply' | 'screen' | 'overlay' | 'soft-light';
  position?: { x: number; y: number };
  scale?: number;
  rotation?: number;
}

export interface MaskSettings {
  opacity: number;
  feather: number;
  invert: boolean;
  blendMode: 'normal' | 'multiply' | 'screen' | 'overlay' | 'soft-light';
  position: { x: number; y: number };
  scale: number;
  rotation: number;
}

// 蒙版形状数据
const maskShapes = [
  { key: "circle", label: "圆形", icon: "radio-button-unchecked" },
  { key: "square", label: "方形", icon: "crop-square" },
  { key: "triangle", label: "三角形", icon: "change-history" },
  { key: "heart", label: "心形", icon: "favorite-border" },
  { key: "star", label: "星形", icon: "star-border" },
  { key: "diamond", label: "菱形", icon: "diamond" },
  { key: "hexagon", label: "六边形", icon: "hexagon" },
  { key: "oval", label: "椭圆", icon: "lens" },
  { key: "cross", label: "十字", icon: "add" },
  { key: "arrow", label: "箭头", icon: "arrow-forward" },
];

// 蒙版渐变数据
const maskGradients = [
  { key: "grad1", label: "渐变1", colors: ["#FF6B6B", "#4ECDC4"] },
  { key: "grad2", label: "渐变2", colors: ["#A8E6CF", "#FFD3A5"] },
  { key: "grad3", label: "渐变3", colors: ["#FD79A8", "#FDCB6E"] },
  { key: "grad4", label: "渐变4", colors: ["#6C5CE7", "#A29BFE"] },
  { key: "grad5", label: "渐变5", colors: ["#74B9FF", "#0984E3"] },
  { key: "grad6", label: "渐变6", colors: ["#00CEC9", "#00B894"] },
  { key: "grad7", label: "渐变7", colors: ["#FDCB6E", "#E17055"] },
  { key: "grad8", label: "渐变8", colors: ["#A29BFE", "#6C5CE7"] },
];

// 分类标签数据
const CATEGORIES = [
  { id: "shape", name: "形状" },
  { id: "gradient", name: "渐变" },
];

export const MaskEditor: React.FC<MaskEditorProps> = ({
  onMaskSelect,
  onMaskCustomize,
  currentTab = "shape",
}) => {
  const [showColorPicker, setShowColorPicker] = useState(false);
  const [selectedColor, setSelectedColor] = useState("#000000");

  // 渲染形状网格
  const renderShapeGrid = () => (
    <View style={styles.itemGrid}>
      {maskShapes.map((shape) => (
        <TouchableOpacity
          key={shape.key}
          style={styles.itemContainer}
          onPress={() => onMaskSelect({
            type: 'shape',
            shape: shape.key as 'circle' | 'rectangle' | 'heart' | 'star' | 'triangle' | 'diamond' | 'square' | 'hexagon' | 'oval' | 'cross' | 'arrow',
            opacity: 100,
            feather: 0,
            invert: false,
            blendMode: 'normal',
            position: { x: 0, y: 0 },
            scale: 100,
            rotation: 0,
          })}
        >
          <View style={styles.shapePreview}>
            <MaterialIcons name={shape.icon as any} size={24} color="#666" />
          </View>
          <Text style={styles.itemLabel}>{shape.label}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );

  // 渲染渐变网格
  const renderGradientGrid = () => (
    <View style={styles.itemGrid}>
      {maskGradients.map((gradient) => (
        <TouchableOpacity
          key={gradient.key}
          style={styles.itemContainer}
          onPress={() => onMaskSelect({
            type: 'gradient',
            gradient: gradient.colors,
            opacity: 100,
            feather: 0,
            invert: false,
            blendMode: 'normal',
            position: { x: 0, y: 0 },
            scale: 100,
            rotation: 0,
          })}
        >
          <View style={styles.gradientPreview}>
            <View style={[styles.gradientOverlay, {
              backgroundColor: gradient.colors[0],
            }]} />
            <View style={[styles.gradientOverlay, {
              backgroundColor: gradient.colors[1],
              opacity: 0.7,
            }]} />
          </View>
        </TouchableOpacity>
      ))}
      {/* 颜色画盘按钮 */}
      <TouchableOpacity
        style={styles.itemContainer}
        onPress={() => setShowColorPicker(true)}
      >
        <View style={styles.colorPickerButton}>
          <MaterialIcons name="palette" size={24} color="#666" />
        </View>
      </TouchableOpacity>
    </View>
  );

  // 获取当前分类的内容
  const getCurrentContent = () => {
    switch (currentTab) {
      case "shape":
        return renderShapeGrid();
      case "gradient":
        return renderGradientGrid();
      default:
        return renderShapeGrid();
    }
  };

  return (
    <View style={styles.container}>
      {/* 内容列表 */}
      <ScrollView
        showsVerticalScrollIndicator={false}
        style={styles.contentList}
        contentContainerStyle={styles.contentListContainer}
      >
        {getCurrentContent()}
      </ScrollView>

      {/* 颜色画盘模态框 */}
      {showColorPicker && (
        <View style={styles.colorPickerModal}>
          <View style={styles.colorPickerHeader}>
            <Text style={styles.colorPickerTitle}>选择颜色</Text>
            <TouchableOpacity onPress={() => setShowColorPicker(false)}>
              <MaterialIcons name="close" size={24} color="#666" />
            </TouchableOpacity>
          </View>
          <View style={styles.colorPickerContainer}>
            <ColorPicker
              color={selectedColor}
              onColorChange={(color) => {
                setSelectedColor(color);
              }}
              thumbSize={30}
              sliderSize={30}
              noSnap={true}
              row={false}
            />
          </View>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
  },

  contentList: {
    backgroundColor: "#fff",
    maxHeight: 300,
  },
  contentListContainer: {
    paddingHorizontal: 10,
    paddingTop: 12,
  },
  itemGrid: {
    flexDirection: "row",
    flexWrap: "wrap",
  },
  itemContainer: {
    alignItems: "center",
    width: "20%",
    marginBottom: 16,
  },
  shapePreview: {
    width: 60,
    height: 60,
    borderRadius: 8,
    backgroundColor: "#f5f5f5",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 8,
    position: "relative",
  },
  gradientPreview: {
    width: 60,
    height: 60,
    borderRadius: 8,
    backgroundColor: "#f5f5f5",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 8,
    position: "relative",
  },
  gradientOverlay: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    borderRadius: 8,
  },
  itemLabel: {
    fontSize: 12,
    color: "#666",
    textAlign: "center",
  },
  colorPickerButton: {
    width: 60,
    height: 60,
    borderRadius: 8,
    backgroundColor: "#f5f5f5",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 8,
  },
  colorPickerModal: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "rgba(0,0,0,0.5)",
    justifyContent: "center",
    alignItems: "center",
    zIndex: 1000,
  },
  colorPickerHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingHorizontal: 20,
    paddingVertical: 15,
    backgroundColor: "#fff",
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
  },
  colorPickerTitle: {
    fontSize: 16,
    fontWeight: "600",
    color: "#333",
  },
  colorPickerContainer: {
    backgroundColor: "#fff",
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
    padding: 20,
    height: 300,
  },
});
